<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
th:replace="~{admin/_inc/_layout::layout(~{::title},~{::link},~{::page_script})}">
<head>
<title>[[#{page.admin_operator} +'|'+#{applicationDisplayName}]]</title>
<!-- datatables -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.10.20/css/dataTables.bootstrap.css}">
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.10.20/css/jquery.dataTables.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/webjars/framework-ext/1.0.0/datatables/css/dataTables.css}">
<!-- font-awesome -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">
<!-- lhgdialog -->
<link rel="stylesheet" type="text/css" th:href="@{/webjars/lhgdialog/4.2.0/skins/bootstrap2.css}">
<link rel="stylesheet" type="text/css" th:href="@{/webjars/framework-ext/1.0.0/datatables/css/dataTables.css}">
</head>
<body>
	<section th:fragment="content">
		<div class="row">
			<div class="col-md-12">
				<div class="box">
					<div class="box-header">
						<div class="box-header">
							<h3 class="box-title" th:text="#{page.admin_operator}"></h3>
						</div>
					</div>
					<div class="box-body no-padding">
						<table id="tt" class="table table-bordered" style="width: 100%; white-space: nowrap">
							<tr>
								<td width="40px"></td>
								<td width="80px">ID</td>
								<td width="80px">父ID</td>
								<td width="160px">描述</td>
								<td width="200px">URI/权限</td>
								<td width="20px">分类</td>
								<td width="80px">CSS式样</td>
								<td width="20px">排序</td>
								<th style="width: 10%">操作</th>
							</tr>
							<tr th:each="item : ${operators}" th:data-id="${item.id}" th:data-pid="${item.parentId}">
								<td th:text=" ${itemStat.count}"></td>
								<td th:text="${item.id}"></td>
								<td><input id="parent_id" th:if="${item.type ==1}" type="text" th:value="${item.parentId}" /></td>
								<td th:text="#{${item.title}}" th:title="${item.title}"></td>
								<td ><span th:text="${item.uri}"></span><br><span th:text="${item.capability}"></span></td>
								<td th:text="#{${item.typeName}}"></td>
								<td><input id="icon_class" type="text" th:value="${item.iconClass}" /></td>
								<td><input id="position" th:if="${item.type < 2}"  type="number" th:value="${item.position}" /></td>
								<td>
								<button class='btn bg-blue btn-sm' th:data-href="@{/admin/operator/save}" value="保存" type="button">保存</button></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>
<th:block th:fragment="page_script">
	<script type="text/javascript" th:inline="javascript">
        var obj = {
            init : function() {
                $('#tt tbody').on('click', '.bg-blue', function(e) {
                    $(e.target).prop("disabled", true);
                    var icon_class = $(e.target).parents('tr').find('#icon_class').val();
                    var position = $(e.target).parents('tr').find('#position').val();
                    var parent_id = $(e.target).parents('tr').find('#parent_id').val();
                    var id = $(e.target).parents('tr').data('id');
                    if(typeof(parent_id) =='undefined'){
                    	parent_id = null;
                    }
                    $.ajax({
                        type : "POST",
                        url : $(e.target).data('href'),
                        data : {
                            id : id,
                            position : position,
                            parent_id : parent_id,
                            icon_class : icon_class
                        },
                        complete : function() {
                            $(e.target).prop("disabled", false);
                        },
                        success : function(data) {
                            window.location.reload(true);
                        },
                        error : ajaxerror
                    });
                });
            }
        }
        $(function() {
            obj.init();
        })
    </script>
</th:block>
</html>